<template>
  <div>
    <a-form-model ref="form" :model="model" :rules="validatorRules" class="password-retrieval-form" @keyup.enter.native="nextStep">
      <a-form-model-item label="手机" required prop="phone" :labelCol="{span: 5}" :wrapperCol="{span: 19}">
        <a-input v-model="model.phone" type="text" autocomplete="false" placeholder="请输入手机号">
          <a-icon slot="prefix" type="phone" :style="{ color: 'rgba(0,0,0,.25)'}"/>
        </a-input>
      </a-form-model-item>
      <a-form-model-item v-if="show" required prop="captcha" label="验证码" :labelCol="{span: 5}" :wrapperCol="{span: 19}">
        <a-row :gutter="16">
          <a-col class="gutter-row" :span="12">
            <a-input @change="captchaChange" v-model="model.captcha" type="text" placeholder="手机短信验证码">
              <a-icon slot="prefix" type="code" :style="{ color: 'rgba(0,0,0,.25)'}"/>
            </a-input>
          </a-col>
          <a-col class="gutter-row" :span="8">
            <a-button
              tabindex="-1"
              size="default"
              :disabled="state.smsSendBtn"
              @click.stop.prevent="getCaptcha"
              v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"></a-button>
          </a-col>
        </a-row>
      </a-form-model-item>
      <a-form-model-item :wrapperCol="{span: 19, offset: 5}">
        <router-link style="float: left;line-height: 40px;" :to="{ name: 'login' }">使用已有账户登录</router-link>
        <a-button type="primary" @click="nextStep" style="margin-left: 20px">下一步</a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
  import { phoneVerification, sendSms } from '../service.js'

  export default {
    name: 'Step2',
    props: ['userList'],
    data() {
      return {
        model: {},
        loading: false,
        // accountName: this.userList.username,
        dropList: '0',
        captcha: '',
        show: true,
        state: {
          time: 60,
          smsSendBtn: false
        },
        formLogin: {
          captcha: '',
          mobile: ''
        },
        validatorRules: {
          phone: [
            { required: true, message: '请输入手机号码!' },
            { validator: this.validatePhone }
          ],
          captcha: [
            { required: true, message: '请输入短信验证码!' }
          ]
        },
      }
    },
    computed: {
    },
    methods: {
      nextStep() {
        let that = this
        that.loading = true
        this.$refs['form'].validate((success) => {
          if(success==true){
            let params = {
              phone: this.model.phone,
              smscode: this.model.captcha
            }
        phoneVerification(params).then((res) => {
          if (res.success) {
            console.log(res);
            let userList = {
              username: res.result.username,
              phone: params.phone,
              smscode: res.result.smscode
            };
            setTimeout(function () {
              that.$emit('nextStep', userList)
            }, 0)
          } else {
            this.cmsFailed(res.message);
          }
        })
      }
        })
      },
      getCaptcha(e) {
        e.preventDefault();
        const that = this
        that.$refs['form'].validateField('phone', err=>{
          if(!err){
            that.state.smsSendBtn = true;
        let interval = window.setInterval(() => {
          if (that.state.time-- <= 0) {
            that.state.time = 60;
            that.state.smsSendBtn = false;
            window.clearInterval(interval);
          }
        }, 1000);
            const hide = that.$message.loading('验证码发送中..', 0);
        let smsParams = {
              mobile: that.model.phone,
          smsmode: '2'
        };
        sendSms(smsParams).then(res => {
          if (!res.success) {
            setTimeout(hide, 1);
                that.cmsFailed(res.message);
          }
          setTimeout(hide, 500);
            })
          }else{
            that.cmsFailed(err);
          }
        })
      },
      cmsFailed(err) {
        this.$notification['error']({
          message: '验证错误',
          description: err,
          duration: 4
        });
      },
      handleChangeSelect(value) {
        var that = this;
        console.log(value);
        if (value == 0) {
          that.dropList = '0';
          that.show = true;
        } else {
          that.dropList = '1';
          that.show = false;
        }
      },
      validatePhone(rule, value, callback) {
          if (value) {
            var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
            if (!myreg.test(value)) {
              callback('请输入正确的手机号')
            } else {
              callback();
            }
          } else {
            callback()
          }
      },
      //手机号改变事件
      captchaChange(val){
        this.$refs['form'].validateField("captcha")
      }
    }

  }
</script>

<style lang="less" scoped>
  .stepFormText {
    margin-bottom: 24px;
  }

  .ant-form-item-label,
  .ant-form-item-control {
    line-height: 22px;
  }

  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }
</style>
